﻿(function () {
    "use strict";

    var credentialStore = Ext.StoreMgr.lookup('SafeBox.Store.CredentialStore');

    var zoomedInCredentials;
    var zoomedOutCredentials;
    var zoomControl;

    var credentialList = [];
    var groupedCredentialList;

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
            WinJS.Resources.processAll();
            initAppBar();
            initHandler();

            zoomedInCredentials = document.getElementById("-zoomed-in-credentials").winControl;
            zoomedOutCredentials = document.getElementById("-zoomed-out-credentials").winControl;
            zoomControl = document.getElementById("-credential-zoom").winControl;

            showCredentials();
        }
    });

    // event handlers

    // private functions

    function initAppBar() { }

    function initHandler() { }

    function showCredentials() {
        credentialList = new WinJS.Binding.List(credentialStore.get());
        groupedCredentialList = credentialList.createGrouped(getGroupKey, getGroupData, compare);

        zoomedInCredentials.itemDataSource = groupedCredentialList.dataSource;
        zoomedInCredentials.groupDataSource = groupedCredentialList.groups.dataSource;
        zoomedInCredentials.itemTemplate = credentialItemTemplate;
        zoomedInCredentials.groupHeaderTemplate = document.getElementById("-header-template");
        zoomedInCredentials.layout = new WinJS.UI.GridLayout();
        zoomedInCredentials.forceLayout();

        zoomedOutCredentials.itemDataSource = groupedCredentialList.groups.dataSource;
        zoomedOutCredentials.itemTemplate = document.getElementById("-zoomed-out-template");
        zoomedOutCredentials.forceLayout();
    }

    function getGroupKey(dataItem) {
        if (dataItem.category != '') {
            return dataItem.category.toUpperCase();
        }
        return 'OTHERS';
    }

    function getGroupData(dataItem) {
        if (dataItem.category != '') {
            return { category: dataItem.category };
        }
        return { category: 'Others' };
    }

    function compare(left, right) {
        return left.toUpperCase().charCodeAt(0) - right.toUpperCase().charCodeAt(0);
    }

    function credentialItemTemplate(itemPromise) {

        return itemPromise.then(function (item) {
            var _template = document.createElement("div");
            var _container = document.createElement("div");
            _container.className = "-credential-item-container";
            _container.id = "-credential-item-" + item.data.id;
            _template.appendChild(_container);

            var _img = document.createElement("img");
            if (item.data.icon != '') {
                _img.src = item.data.icon;
            }
            else {
                _img.src = '/images/default.png';
            }

            var _name = document.createElement("p");
            _name.className = "-credential-item-name";
            _name.innerText = item.data.name;

            _container.appendChild(_img);
            _container.appendChild(_name);

            return _template;
        });
    }

    WinJS.Utilities.markSupportedForProcessing(credentialItemTemplate);
})();
